<template>
  <div class="m-tag" :class="classes">
    <slot></slot>
  </div>
</template>

<script>
export default {
  componentName: 'MTag',
  props: {
    type: { // warning error success primary link
      type: String,
      default: ''
    },
    plain: { // 镂空
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes () {
      let result = []
      if (this.plain) {
        result.push('m-tag--plain')
      }
      if (this.type) {
        result.push(`m-tag--${this.type}`)
      }
      return result
    }
  }
}
</script>

<style lang="scss">
  .m-tag{
    display: inline-block;
    padding: .05rem;
    line-height: 1;
    border-radius: .03rem;
    font-size: 0.24rem;
    background: $color-sub;
    color: $color-white;
    & + .m-tag{
      margin-right: .1rem;
    }
    &--error{
      background: $color-error
    }
    &--success{
      background: $color-success
    }
    &--primary{
      background: $color-primary
    }
    &--warning{
      background: $color-warning
    }
    &--link{
       background: $color-link
    }
    &--plain{
      background: transparent !important;
      border-radius: .04rem;
      border: 1px solid $color-sub;
      color: $color-sub;
      &.m-tag{
        &--error{
          border-color: $color-error;
          color: $color-error;
        }
        &--success{
          border-color: $color-success;
          color: $color-success;
          background: $color-success
        }
        &--primary{
          border-color: $color-primary;
          color: $color-primary;
        }
        &--warning{
          border-color: $color-warning;
          color: $color-warning;
        }
        &--link{
          border-color: $color-link;
          color: $color-link;
        }
      }
    }
  }
</style>
